/*-
 * #%L
 * This file is part of "Apromore Community".
 * %%
 * Copyright (C) 2018 - 2020 The University of Melbourne.
 * %%
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Lesser Public License for more details.
 * 
 * You should have received a copy of the GNU General Lesser Public
 * License along with this program.  If not, see
 * <http://www.gnu.org/licenses/lgpl-3.0.html>.
 * #L%
 */
.logo {
  cursor: pointer; }

.z-navitem-text {
  font-size: small !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  word-break: normal; }

.z-column-content {
  font-size: small !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  word-break: normal; }

.n-nav-item {
  text-align: center; }
  .n-nav-item i {
    margin-right: 15px; }

@media only screen and (max-width: 680px) {
  .logo {
    display: none; }
  .header-box {
    width: 50%;
    margin: auto; }
  .n-nav-item {
    padding-left: 20px;
    padding-right: 20px; } }

@media screen and (min-width: 680px) {
  .logo {
    max-width: 100%; }
  .navbar-container {
    margin-top: 10px; } }

.toggle > input {
  position: absolute;
  visibility: hidden; }

.toggle > label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none; }

.toggle-round-flat > label {
  width: 60px;
  height: 30px;
  border-color: #dddddd;
  border-radius: 30px;
  transition: background 0.4s; }
  .toggle-round-flat > label:before, .toggle-round-flat > label:after {
    display: block;
    position: absolute;
    content: ""; }
  .toggle-round-flat > label:before {
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    background-color: #ffffff;
    border-radius: 30px;
    transition: background 0.4s; }
  .toggle-round-flat > label:after {
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: 26px;
    background-color: #dddddd;
    border-radius: 26px;
    transition: margin 0.4s, background 0.4s; }

.toggle-round-flat > input:checked + label {
  background-color: #4fb7ff; }

.toggle-round-flat > input:checked + label:after {
  margin-left: 30px;
  background-color: #4fb7ff; }

.z-notification-error .z-notification-content, .z-notification-info .z-notification-content {
  text-align: center;
  border-radius: 5px;
  padding: 40px 40px 40px 70px;
  width: 23vw;
  margin: auto; }

.z-notification-error .z-notification-content {
  border: thin solid rgba(170, 4, 4, 0.7);
  background-color: rgba(255, 29, 4, 0.25); }

.z-notification-info .z-notification-content {
  border: thin solid rgba(35, 170, 0, 0.7);
  background-color: rgba(45, 255, 0, 0.15); }

.z-hlayout-inner {
  z-index: 3; }

.transparent-btn {
  min-width: 48px;
  min-height: 48px;
  max-width: 100%;
  max-height: 100%;
  white-space: normal;
  word-wrap: break-word;
  border-radius: 40px;
  width: 160px;
  height: 50px;
  font-size: small !important;
  font-weight: bold !important;
  text-transform: uppercase;
  background: transparent;
  border: solid 2px #0068b3;
  color: #0068b3;
  width: 100px;
  height: 50px;
  min-width: 24px;
  min-height: 24px;
  max-width: 100%;
  max-height: 100%; }

@media screen and (min-width: 48px) {
  .n-btn, .n-upload-btn, .n-proceed, .n-block-btn, .n-btn-small {
    z-index: 1;
    min-width: 48px;
    min-height: 48px;
    max-width: 100%;
    max-height: 100%;
    white-space: normal;
    word-wrap: break-word;
    border-radius: 40px;
    width: 160px;
    height: 50px;
    font-size: small !important;
    font-weight: bold !important;
    text-transform: uppercase;
    animation: btn-gradient 15s ease alternate infinite; }
    .n-btn:hover, .n-upload-btn:hover, .n-proceed:hover, .n-block-btn:hover, .n-btn-small:hover {
      background: transparent;
      color: #0068b3;
      transition: all 0.14s ease-in-out; }
    .n-btn::before, .n-upload-btn::before, .n-proceed::before, .n-block-btn::before, .n-btn-small::before {
      z-index: -1;
      content: '';
      position: absolute;
      top: 100%;
      bottom: 100%;
      left: 100%;
      right: 100%;
      background-color: #0068b3; }
    .n-btn:hover::before, .n-upload-btn:hover::before, .n-proceed:hover::before, .n-block-btn:hover::before, .n-btn-small:hover::before {
      max-height: 100%;
      max-width: 100%;
      background-color: white;
      border-radius: 40px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border: solid 2px #0068b3;
      transition: all 0.14s ease-in-out; }
  .n-btn, .n-upload-btn {
    background: linear-gradient(53deg, #0093f9, #0068b3);
    background-size: 400% 400%; }
    .n-btn[disabled], .n-upload-btn[disabled] {
      background: linear-gradient(53deg, #e6e6e6, #bbbbbb);
      background-size: 600% 600%; }
    .n-btn[disabled]:hover::before, .n-upload-btn[disabled]:hover::before {
      display: none; }
    .n-btn[disabled]:hover, .n-upload-btn[disabled]:hover {
      color: rgba(0, 0, 0, 0.34); }
  .n-proceed {
    margin-top: 100px;
    background: linear-gradient(53deg, #0093f9, #0068b3);
    background-size: 400% 400%; }
    .n-proceed[disabled] {
      background: linear-gradient(53deg, #e6e6e6, #bbbbbb);
      background-size: 600% 600%; }
    .n-proceed[disabled]:hover::before {
      display: none; }
    .n-proceed[disabled]:hover {
      color: rgba(0, 0, 0, 0.34); }
  .n-block-btn {
    display: inline-block;
    background: linear-gradient(53deg, #0093f9, #0068b3);
    background-size: 400% 400%; }
    .n-block-btn[disabled] {
      background: linear-gradient(53deg, #e6e6e6, #bbbbbb);
      background-size: 600% 600%; }
    .n-block-btn[disabled]:hover::before {
      display: none; }
    .n-block-btn[disabled]:hover {
      color: rgba(0, 0, 0, 0.34); }
  .n-btn-small {
    background: linear-gradient(53deg, #0093f9, #0068b3);
    background-size: 400% 400%;
    width: 90px;
    height: 50px;
    min-width: 24px;
    min-height: 24px;
    max-width: 100%;
    max-height: 100%; }
    .n-btn-small[disabled] {
      background: linear-gradient(53deg, #e6e6e6, #bbbbbb);
      background-size: 600% 600%; }
    .n-btn-small[disabled]:hover::before {
      display: none; }
    .n-btn-small[disabled]:hover {
      color: rgba(0, 0, 0, 0.34); } }

@media screen and (max-width: 48px) {
  .n-btn, .n-upload-btn, .n-proceed {
    min-width: 48px;
    min-height: 48px;
    max-width: 100%;
    max-height: 100%;
    white-space: normal;
    word-wrap: break-word;
    border-radius: 40px; }
  .n-btn {
    background: linear-gradient(53deg, #0093f9, #0068b3);
    background-size: 400% 400%; }
    .n-btn[disabled] {
      background: linear-gradient(53deg, #e6e6e6, #bbbbbb);
      background-size: 600% 600%; }
    .n-btn[disabled]:hover::before {
      display: none; }
    .n-btn[disabled]:hover {
      color: rgba(0, 0, 0, 0.34); }
  .n-upload-btn {
    background: linear-gradient(53deg, #0093f9, #0068b3);
    background-size: 400% 400%; }
    .n-upload-btn[disabled] {
      background: linear-gradient(53deg, #e6e6e6, #bbbbbb);
      background-size: 600% 600%; }
    .n-upload-btn[disabled]:hover::before {
      display: none; }
    .n-upload-btn[disabled]:hover {
      color: rgba(0, 0, 0, 0.34); }
  .n-proceed {
    background: linear-gradient(53deg, #0093f9, #0068b3);
    background-size: 400% 400%; }
    .n-proceed[disabled] {
      background: linear-gradient(53deg, #e6e6e6, #bbbbbb);
      background-size: 600% 600%; }
    .n-proceed[disabled]:hover::before {
      display: none; }
    .n-proceed[disabled]:hover {
      color: rgba(0, 0, 0, 0.34); } }

@keyframes btn-gradient {
  0% {
    background-position-x: 0;
    background-position-y: 50%; }
  50% {
    background-position-x: 50%;
    background-position-y: 50%; }
  100% {
    background-position-x: 100%;
    background-position-y: 50%; } }

.selected-option {
  background: #0093f9 !important;
  color: white !important;
  transition: all 0.34s; }

.job-remove {
  background: red;
  color: lightgrey;
  border: solid 0.2vh lightgrey;
  transition: all 0.14s ease-in-out; }
  .job-remove:hover {
    background: orangered;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
    transition: all 0.14s ease-in-out; }

.file-upload-err, .file-upload {
  text-align: center;
  width: 80%;
  height: 100px;
  border-radius: 7px;
  margin: 15px; }
  .file-upload-err .file-name, .file-upload .file-name {
    font-weight: bold; }

.file-upload-err {
  color: rgba(170, 4, 4, 0.7);
  background-color: rgba(255, 29, 4, 0.25);
  border: thick dashed rgba(170, 4, 4, 0.7); }

.file-upload {
  background-color: #e6e6e6;
  border: thick dashed #bbbbbb; }

.drop-area {
  background: transparent; }

.param-label, .validation-label {
  font-weight: bold; }

.param-label {
  margin-top: 10px; }

.small-font {
  font-size: 10px; }

.extra-small {
  font-size: 8px; }

input[type=checkbox] {
  transform: scale(1.2) !important; }

.graph-container {
  max-width: 80%;
  max-height: 80%;
  width: 80%;
  height: 80%; }

.large-text {
  font-size: large !important;
  color: rgba(0, 0, 0, 0.5); }

.larger-text {
  font-size: 13pt !important;
  color: rgba(0, 0, 0, 0.5); }

.margin-top-40px {
  margin-top: 40px; }

.margin-top-20px {
  margin-top: 20px; }

.log-listbox {
  max-height: 400px !important;
  min-height: 200px !important; }

.validation-include {
  max-height: 100%;
  max-width: 100%; }

.info-container {
  margin-right: 40px;
  max-height: 200px !important;
  overflow-x: hidden;
  overflow-y: auto; }

.id-combo {
  margin-left: 10px;
  width: 100%;
  max-width: 100%;
  max-height: 100%; }

.pointer {
  cursor: pointer; }

.val-cell {
  cursor: pointer; }
  .val-cell:hover {
    background: #b3dfff !important;
    transition: all 0.22s; }
  .val-cell > span {
    font-size: small !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    word-break: normal; }

.validation-panel {
  background: rgba(0, 0, 0, 0.12); }

.validation-panel-child {
  background: rgba(0, 0, 0, 0.05); }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.hyper-grid {
  animation: fade-in 0.5s ease;
  margin-top: 3vh;
  margin-bottom: 3vh; }

.color-box {
  width: 9px;
  height: 9px;
  margin-left: 10px;
  margin-top: 6px; }

.comp-grid {
  max-width: 100%;
  max-height: 100%; }

.selectedContext > td {
  background: rgba(0, 104, 179, 0.1) !important; }

.n-menu-item i {
  vertical-align: middle; }

@media screen and (max-height: 900px) {
  .hyper-grid {
    animation: fade-in 0.5s ease;
    margin-top: 3vh;
    margin-bottom: 3vh;
    transform: scale(0.9); } }

.z-east-collapsed, .tracker-vbox {
  border-radius: 0.7vh;
  border-color: #0068b3;
  border-style: solid;
  border-width: 0.2vh;
  transition: all 0.14s ease-in-out; }

[class*="z-"]:not([class*="z-icon-"]) {
  font-size: 14px; }

* {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important; }

.selectable {
  -webkit-touch-callout: default !important;
  -webkit-user-select: auto !important;
  -khtml-user-select: default !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important; }

.z-loading {
  top: 50% !important;
  left: 45% !important;
  align-content: center;
  vertical-align: middle; }

.scrollable {
  overflow-y: auto !important; }

.margin-top-7px {
  margin-top: 7px; }

.text-align-center {
  text-align: center; }

.max-width {
  max-width: 100%; }

.max-height {
  max-height: 100%; }

.display-block {
  display: block;
  white-space: normal;
  word-wrap: break-word;
  word-break: normal; }

.zk-font {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.no-hor-overflow {
  overflow-x: hidden; }

.no-overflow {
  overflow: hidden; }

.padding-bottom-20px {
  padding-bottom: 20px; }

.start-font {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.54); }

.validation-link {
  font-size: small !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  word-break: normal;
  margin-bottom: 5px; }
  .validation-link > i {
    margin-right: 5px;
    margin-left: 5px;
    font-size: 24px !important;
    padding-top: 5px; }

.z-panel-header {
  font-size: small !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  word-break: normal; }

.validation-btn > i {
  padding-top: 5px;
  font-size: 20pt;
  color: #0093f9; }

.n-popup {
  max-width: 240px; }

.n-download > i {
  font-size: 22px !important; }

.wm-cont {
  line-height: 17pt;
  width: 43vw;
  margin-top: 12vh; }

.landing-btn-cont {
  margin-top: 13vh; }
